<script setup lang="ts">
const props = withDefaults(
  defineProps<{ bg?: "transparent" | "no-transparent" | "normal" }>(),
  { bg: "normal" }
);
</script>

<template>
  <Mask :bg="props.bg">
    <div
      class="absolute bg-white left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 p-6 rounded-md shadow-md lg:w-1/3"
    >
      <slot></slot>
    </div>
  </Mask>
</template>
